<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-22 16:19:19
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-18 16:47:06
 * @FilePath: \cxl-driving-training\src\views\price\list\Index.vue
-->
<template>
    <div class="page-box">
        <TemplateVue
            :page="data.pageData"
            @search="data.onSearch"
            @reset="data.onReset"
            @paginationChange="data.onPaginationChange"
            @paginationSize="data.onPaginationSize"
            @operation="data.onOperation"
        >
        </TemplateVue>
        <BasicDialogVue :data="data.dialog" @close="data.onCloseDialog(dialogForm)">
            <template #content>
                <el-form
                    ref="dialogForm"
                    :inline="true"
                    :model="data.dialogForm"
                    label-width="100px"
                    :rules="data.rules"
                >
                    <el-form-item label="学车类型：" prop="type">
                        <el-select clearable v-model="data.dialogForm.type" disabled style="width: 200px">
                            <el-option
                                v-for="itemOption in data.typeOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班别类型：" prop="class">
                        <el-select clearable v-model="data.dialogForm.class" disabled style="width: 200px">
                            <el-option
                                v-for="itemOption in data.classOptions"
                                :key="itemOption.value"
                                :label="itemOption.label"
                                :value="itemOption.value"
                            />
                        </el-select>
                    </el-form-item>
                    <template v-if="Number(data.dialogForm.type) === 1">
                        <h1 class="title">C1价格设置</h1>
                        <el-form-item label="活动价：" prop="activePricec1">
                            <el-input
                                v-model="data.dialogForm.activePricec1"
                                type="number"
                                clearable
                                placeholder="请输入活动价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="原价：" prop="originalPricec1">
                            <el-input
                                v-model="data.dialogForm.originalPricec1"
                                type="number"
                                clearable
                                placeholder="请输入原价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                        <h1 class="title">C2价格设置</h1>
                        <el-form-item label="活动价：" prop="activePricec2">
                            <el-input
                                v-model="data.dialogForm.activePricec2"
                                type="number"
                                clearable
                                placeholder="请输入活动价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="原价：" prop="originalPricec2">
                            <el-input
                                v-model="data.dialogForm.originalPricec2"
                                type="number"
                                clearable
                                placeholder="请输入原价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                    </template>
                    <template v-else>
                        <el-form-item label="活动价：" prop="activePrice">
                            <el-input
                                v-model="data.dialogForm.activePrice"
                                type="number"
                                clearable
                                placeholder="请输入活动价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="原价：" prop="originalPrice">
                            <el-input
                                v-model="data.dialogForm.originalPrice"
                                type="number"
                                clearable
                                placeholder="请输入原价"
                                style="width: 200px"
                                :step="0.01"
                            ></el-input>
                        </el-form-item>
                    </template>
                </el-form>
                <div class="btn">
                    <el-button @click="data.onCloseDialog(dialogForm)">取消</el-button>
                    <el-button type="primary" @click="data.submitForm(dialogForm)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import TemplateVue from '@/components/template/Index.vue'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import CompanyAdminData from './index'
import { reactive, ref } from 'vue'
const dialogForm = ref()

const data = reactive(new CompanyAdminData())
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
}
.title {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 600;
}
</style>
